<template>
  <v-container fluid class="textarea-container">
    <v-row>
      <v-col cols="6">
        <v-text-field v-model="key" label="密钥/密文/model"></v-text-field>
      </v-col>
      <v-col cols="6">
        <v-text-field v-model="iv" label="偏移量/exponent"></v-text-field>
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="1">
        <v-btn prepend-icon="mdi-check-circle" @click="encode"> 加密 </v-btn>
      </v-col>

      <v-col cols="1">
        <v-btn prepend-icon="mdi-check-circle" @click="decode"> 解密 </v-btn>
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="6">
        <v-textarea label="请输入" rows="30" v-model="text"></v-textarea>
      </v-col>

      <v-col cols="6">
        <div ref="jsoneditor2" style="padding-bottom: 10%"></div>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
import axios from "axios";
import JSONEditor from "jsoneditor";
export default {
  data() {
    return {
      jsoneditor: null, // JSONEditor 实例
      sourcetext: null,
      jsonData: { name: "John", age: 30 }, // 初始 JSON 数据
      ex11: ["red"],
      key: "",
      iv: "",
      text: "",
      outext: "",
    };
  },
  methods: {
    encode() {
      axios
        .post("/api/crypto/encode", {
          key: this.key,
          iv: this.iv,
          text: this.text,
        })
        .then((response) => {
          // this.items = response.data;
          const data = response.data.data;
          console.log(data);
          //   this.outext = JSON.stringify(data, null, "\t");
          this.$nextTick(() => {
            try {
              this.jsoneditor.set(data);
            } catch (error) {
              console.log(error);
            }

            // this.jsoneditor.set(this.jsonData);
          });
        })
        .catch((error) => {
          console.error(error);
        });
    },
    decode() {
      axios
        .post("/api/crypto/decode", {
          key: this.key,
          iv: this.iv,
          text: this.text,
        })
        .then((response) => {
          // this.items = response.data;
          const data = response.data.data;
          console.log(data);
          //   this.outext = JSON.stringify(data, null, "\t");
          this.$nextTick(() => {
            try {
              this.jsoneditor.set(data);
            } catch (error) {
              console.log(error);
            }

            // this.jsoneditor.set(this.jsonData);
          });
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
  mounted() {
    const container = this.$refs.jsoneditor2;
    const options = {};
    this.jsoneditor = new JSONEditor(container, options);
  },
};
</script>
